<template>
  <vue-easy-lightbox
        :visible="visibleRef"
        :imgs="imgsRef"
        :index="indexRef"
        @hide="onHide"
      ></vue-easy-lightbox>
  <div class="detailCon">
    <div class="row detailItem">
      <span class="col dTitle">主数据及生產實重</span>
    </div>
    <div v-if="showRouting" class="row detailItem">
      <q-table
        flat
        bordered
        dense
        separator="cell"
        table-header-class="bg-indigo-2"
        :rows="rtrows"
        :columns="rtcolumns"
        row-key="seq"
        :visible-columns="visCol"
        class="routingTable"
        :pagination="{ rowsPerPage: 10 }"
      />
    </div>

    <div v-if="showRoutingHist" class="row detailItem">
      <div class="tableBox">
        <q-table
          flat
          bordered
          dense
          separator="cell"
          table-header-class="bg-deep-purple-3"
          :rows="ftrows"
          :columns="ftcolumns"
          class="flowTable"
          :pagination="{ rowsPerPage: 10 }"
        >
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td key="workCount" :props="props">
                {{ props.row.workCount }}
              </q-td>
              <q-td key="flow" :props="props">
                {{ props.row.flow }}
              </q-td>
              <q-td key="startDate" :props="props">
                {{ props.row.startDate == 'noconfig' ? '不适用' : props.row.startDate}}
              </q-td>
              <q-td key="workerName" :props="props">
                <span v-if="props.row.workerName=='noconfig'&&props.row.worker_duration=='noconfig'">
                  {{ '不适用' }}
                </span>
                <span v-else>
                  {{ props.row.workerName }} <br />
                  {{ props.row.worker_duration }}
                </span>
              </q-td>
              <q-td key="qcName" :props="props">
                <span v-if="props.row.qcName=='noconfig'&&props.row.qc_endDate=='noconfig'">
                  {{ '不适用' }}
                </span>
                <span v-else>
                  {{ props.row.qcName }} <br />
                  {{ props.row.qc_endDate }}
                </span>
              </q-td>
              <q-td key="leaderName" :props="props">
                <span v-if="props.row.leaderName=='noconfig'&&props.row.leader_endDate=='noconfig'">
                  {{ '不适用' }}
                </span>
                <span v-else>
                  {{ props.row.leaderName }} <br />
                  {{ props.row.leader_endDate }}
                </span>
              </q-td>
              <q-td key="stoneCheckName" :props="props">
                <span v-if="props.row.stoneCheckName=='noconfig'&&props.row.stoneCheck_endDate=='noconfig'">
                  {{ '不适用' }}
                </span>
                <span v-else>
                  {{ props.row.stoneCheckName }} <br />
                  {{ props.row.stoneCheck_endDate }}
                </span>
              </q-td>
              <q-td key="dispatchName" :props="props">
                <span v-if="props.row.dispatchName=='noconfig'&&props.row.dispatchName_endDate=='noconfig'">
                  {{ '不适用' }}
                </span>
                <span v-else>
                  {{ props.row.dispatchName }} <br />
                {{ props.row.dispatchName_endDate }}
                </span>
            
              </q-td>
            </q-tr>
          </template>
        </q-table>
      </div>
    </div>
    <q-separator />

    <div class="row detailItem">
      <div
        class="col stonePic"
        v-if="useWODetails.displayConfig.show_Row_Stone_Image"
      >
        <span class="dTitle">排石图</span> <br />
        <!-- <span>img here</span> -->
        <!-- <div class="menuSVGBox">
          <img src="../../../assets/icons/scanqrcode.svg" class="menuSVG" />
        </div>
        <br />

        {{'123'}}
        <div class="menuSVGBox">
          <img src="../../../assets/icons/scanqrcode.svg" class="menuSVG" />
        </div>
        <br />

        {{'123'}}

        <div class="menuSVGBox">
          <img src="../../../assets/icons/scanqrcode.svg" class="menuSVG" />
        </div>
        <br />

        {{'123'}} -->

        <div v-for="(item, index) in useWODetails.stoneImgs.imgData" :key="index">
          <div class="menuSVGBox">
            <img :src="item.imgUrl" class="menuSVG"   @click="showSingle(item.imgUrl)"/>
          </div>
          {{ item.fileName }}
          <br />
        </div>
      </div>

      <q-separator vertical />

      <div
        class="col colorPic"
        v-if="useWODetails.displayConfig.show_Colour_Image"
      >
        <span class="dTitle">彩图</span> <br />
        <div v-for="(item, index) in useWODetails.colorImgs.imgData" :key="index">
          <div class="menuSVGBox">
            <img :src="item.imgUrl" class="menuSVG"  @click="showSingle(item.imgUrl)"/>
          </div>
          {{ item.fileName }}
          <br />
        </div>
        
      </div>

      <q-dialog v-model="zoomModalOpen">
          <q-img :src="zoomedImageUrl" style="max-width: 50vh;" :fit="contain" />
      </q-dialog>


    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useWoDetailsStore } from "src/stores/modules/wodetailsStore";
import VueEasyLightbox from "vue-easy-lightbox";

const imgsRef = ref([])
const visibleRef = ref(false)

const onShow = () => {
  visibleRef.value = true;
};
const onHide = () => {
  visibleRef.value = false
}

const showSingle = (itemRul) => {
  imgsRef.value = itemRul;
  onShow();
};

const useWODetails = useWoDetailsStore();
let showRouting = ref(false);
let showRoutingHist = ref(false);

const routing = useWODetails.articleInfo.routing;
const routingHistory = useWODetails.routingHistory;
// console.log('routing', routing);
// console.log('routingHistory', routingHistory);
showRouting.value = routing !== undefined;
showRoutingHist.value = routingHistory !== undefined;

// Routing Table
let rtcolumns = [];
let rtrows = [];
const visCol = ["flow", "difficulty", "qty", "weight"];


const zoomedImageUrl = ref(false);
const zoomModalOpen = ref(false);



rtcolumns = [
  {
    name: "seq",
    // required: true,
    label: "#",
    align: "center",
    field: (row) => row.seq,
    format: (val) => `${val}`,
    sortable: false,
  },
];
if (useWODetails.displayConfig.show_Difficulty) {
  rtcolumns.push({
    name: "flow",
    align: "center",
    label: "工艺路线",
    field: "flow",
    sortable: false,
  });
}
if (useWODetails.displayConfig.show_Difficulty) {
  rtcolumns.push({
    name: "difficulty",
    align: "center",
    label: "难度",
    field: "difficulty",
    sortable: false,
  });
}

if (useWODetails.displayConfig.show_Divided_member) {
  rtcolumns.push({
    name: "qty",
    align: "center",
    label: "分件数量",
    field: "qty",
    sortable: false,
  });
}

if (useWODetails.displayConfig.show_Production_weight) {
  rtcolumns.push({
    name: "weight",
    align: "center",
    label: "生产实重",
    field: "weight",
    sortable: false,
  });
}

rtrows = routing;

// Flow Table
let ftcolumns = [];
let ftrows = [];

ftcolumns = [
  {
    name: "workCount",
    required: true,
    label: "生产次数",
    align: "center",
    field: (row) => row.workCount,
    format: (val) => `${val}`,
    sortable: true,
  },
  // { name: 'workCount', align: 'center', label: '生产次数', field: 'workCount', sortable: false },
  {
    name: "flow",
    align: "center",
    label: "工艺路线",
    field: "flow",
    sortable: false,
  },
  {
    name: "startDate",
    align: "center",
    label: "日期",
    field: "startDate",
    sortable: false,
  },
  {
    name: "workerName",
    align: "center",
    label: "工人",
    field: "workerName",
    sortable: false,
  },
  {
    name: "qcName",
    align: "center",
    label: "QC",
    field: "qcName",
    sortable: false,
  },
  {
    name: "leaderName",
    align: "center",
    label: "组长",
    field: "leaderName",
    sortable: false,
  },
  {
    name: "stoneCheckName",
    align: "center",
    label: "验石员",
    field: "stoneCheckName",
    sortable: false,
  },
  {
    name: "dispatchName",
    align: "center",
    label: "中央收發",
    field: "dispatchName",
    sortable: false,
  },
];

ftrows = routingHistory;

const openZoomModal = (imageUrl) => {
  zoomedImageUrl.value = imageUrl;
  zoomModalOpen.value = true;
  console.log("zoomin:"+imageUrl)
};

</script>

<style lang="scss" scoped>
.detailCon {
  background-color: rgba(255, 255, 255, 0.9);
  margin: 10px 5px 5px 5px;
  border-radius: 10px;
  padding: 10px 5px 5px 10px;
  font-size: 1.1rem;
  @media (max-width: 480px) {
    font-size: 0.7em;
    margin: 0px 5px 5px 5px;
  }
  .detailItem {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    .dTitle {
      color: black;
      font-weight: bold;
      text-align: center;
    }
    .dValue {
      margin-left: 5px;
    }

    .tableBox {
      overflow: hidden;
      width: 100%;
    }

    .routingTable {
      width: 100%;
    }
    .flowTable {
      width: 100%;
      thead {
        width: 100%;
        text-align: center;
        // background-color: #ACBADF;
      }
      // tbody th {
      // background-color: #D8DFF4;
      // }
      tbody td {
        // background-color: white;
        text-align: center;
      }
    }

    .stonePic,
    .colorPic {
      text-align: center;
    }
  }
}

.menuSVGBox {
  margin-top: 20px;
  .menuSVG {
    height: 5rem;
    color: #5f51c0;
    cursor: pointer
  }
}

.stoneImg {
  height: 100px;
  width: 100px;
}

.zoom-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}

.landscape-image {
  height: 100%;
  width: auto;
}

.image-container {
  max-height: 80vh;
  max-width: 80vw;
  overflow: auto;
}

</style>
